<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current">
        <header class="bar bar-nav shop-header">
          <h1 class="title">订单完成</h1>
        </header>
        <div class="content" style="margin-bottom: 0rem;">
          <a href="#protocol-push" data-toggle="push" class="button button-fill button-buy"></a>
          <div class="list-block media-list payment-list" style="margin-bottom: .5rem;">
            <ul>
              <li class="item-content">
                <div class="item-media"><img src="${cloud.prod}/${order.product.cover}" style='width: 4rem;'></div>
                <div class="item-inner">
                  <div class="item-title" style="white-space: normal;">${order.product.name}</div>
                </div>
              </li>
            </ul>
          </div>
          
          <div class="list-block media-list payment-list" style="margin-bottom: .5rem;">
            <ul>
              <li>
                <div class="item-content order-info">
                  <div class="item-inner">
                    <div class="item-text">
                      <p>订单编号：${order.code}</p>
                      <p>下单时间：<fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm"/></p>
                      <p>支付时间：<fmt:formatDate value="${order.payTime}" pattern="yyyy-MM-dd HH:mm"/></p>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content order-amount">
                  <div class="item-inner">
                    <div class="item-text">
                      <p>支付金额：<span><small>￥</small><fmt:formatNumber value="${order.price / 100}"  pattern="0.00" maxFractionDigits="2" /></span></p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          
          <c:if test="${order.orderType.online and order.onlineYear and order.paymentStatus.paid}">
            <div class="list-block media-list payment-list" style="margin-bottom: .5rem;">
              <ul>
                <li>
                  <div class="item-content order-info">
                    <div class="item-inner">
                      <div class="item-text">
                        <p>获得八张优惠券，有效期一年，可任意购买8期线上营，仅限本人及固定一名亲友使用</p>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <a href="#" class="item-link item-content open-coupon">
                    <div class="item-inner">
                      <div class="item-text">
                        <p>查看获得的优惠券</p>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </c:if>
          
          <div class="content-block" style="margin: 0px;">
            <p><a href="${ctx.host}/profile" class="button button-big button-success button-fill">返回首页</a></p>
          </div>
          
          <div style="text-align: center; margin-bottom: 10px;">
            <p style="color: #999;"><small>请长按以下客服二维码，获取更多资讯！</small></p>
            <c:set var="alias" value="${order.orderType.alias}-${order.site.id}"></c:set>
            <img src="${cloud.prod}/${persist.serviceQrcodes[alias].value}-qrcode">
          </div>
          
        </div>
        <!-- End Content -->
        
      </div>
    </div>
    
    <c:if test="${order.orderType.online and order.onlineYear and order.paymentStatus.paid}">
      <div class="popup popup-coupon">
        <div class="content-block">
          <header class="bar bar-nav fs-header-small">
            <a href="#" class="icon icon-left pull-left back close-popup"></a>
            <h1 class="title">获得优惠券</h1>
          </header>
          <div class="content">
            <c:if test="${empty coupons}">
              <p class="text-center" style="margin-top: 5rem; color: #999;">您暂无优惠券哦</p>
            </c:if>
            <c:forEach var="coupon" items="${coupons}">
              <c:choose>
                <c:when test="${empty coupon.originalUserId}">
                  <c:choose>
                    <c:when test="${coupon.status.claimed && coupon.restDay > 0}">
                      <a href="${ctx.host}/profile/coupon/${coupon.id}">
                        <div class="list-block media-list coupon">
                          <ul>
                            <li>
                              <label class="label-checkbox item-content">
                                <div class="item-inner">
                                  <div class="item-text">
                                    <h2 class="coupon-amount">
                                      <c:choose>
                                        <c:when test="${coupon.template.discountType.percent}">全额</c:when>
                                        <c:otherwise><span>￥</span>${coupon.amount / 100}</c:otherwise>
                                      </c:choose>
                                    </h2>
                                    <div class="coupon-info">
                                      <p class="coupon-title">${coupon.templateName}</p>
                                      <p class="coupon-date">
                                  有效时间：
                                        <fmt:formatDate value="${coupon.effectiveStartDate}" pattern="yyyy-MM-dd" />
                                        &nbsp;至&nbsp;
                                        <fmt:formatDate value="${coupon.effectiveEndDate}" pattern="yyyy-MM-dd" />
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </label>
                            </li>
                          </ul>
                        </div>
                      </a>
                    </c:when>
                    <c:when test="${coupon.status.claimed && coupon.restDay <= 0}">
                      <div class="list-block media-list coupon used">
                        <ul>
                          <li>
                            <label class="label-checkbox item-content">
                              <div class="item-inner">
                                <div class="item-text">
                                  <h2 class="coupon-amount">
                                    <c:choose>
                                      <c:when test="${coupon.template.discountType.percent}">全额</c:when>
                                      <c:otherwise> <span>￥</span>${coupon.amount / 100}</c:otherwise>
                                    </c:choose>
                                  </h2>
                                  <div class="coupon-info">
                                    <p class="coupon-title">${coupon.templateName}</p>
                                    <p>已过期</p>
                                  </div>
                                </div>
                              </div>
                            </label>
                          </li>
                        </ul>
                      </div>
                    </c:when>
                    <c:when test="${coupon.status.occupied}">
                      <div class="list-block media-list coupon used">
                        <ul>
                          <li>
                            <label class="label-checkbox item-content">
                              <div class="item-inner">
                                <div class="item-text">
                                  <h2 class="coupon-amount">
                                    <c:choose>
                                      <c:when test="${coupon.template.discountType.percent}">全额</c:when>
                                      <c:otherwise><span>￥</span>${coupon.amount / 100}</c:otherwise>
                                    </c:choose>
                                  </h2>
                                  <div class="coupon-info">
                                    <p class="coupon-title">${coupon.templateName}</p>
                                    <p>该优惠券已被占用</p>
                                  </div>
                                </div>
                              </div>
                            </label>
                          </li>
                        </ul>
                      </div>
                    </c:when>
                    <c:when test="${coupon.status.used}">
                      <div class="list-block media-list coupon used">
                        <ul>
                          <li>
                            <label class="label-checkbox item-content">
                              <div class="item-inner">
                                <div class="item-text">
                                  <h2 class="coupon-amount">
                                    <c:choose>
                                      <c:when test="${coupon.template.discountType.percent}">全额</c:when>
                                      <c:otherwise><span>￥</span>${coupon.amount / 100}</c:otherwise>
                                    </c:choose>
                                  </h2>
                                  <div class="coupon-info">
                                    <p class="coupon-title">${coupon.templateName}</p>
                                    <p>已使用</p>
                                  </div>
                                </div>
                              </div>
                            </label>
                          </li>
                        </ul>
                      </div>
                    </c:when>
                  </c:choose>
                </c:when>
                <c:otherwise>
                  <div class="list-block media-list coupon used">
                    <ul>
                      <li>
                        <label class="label-checkbox item-content">
                          <div class="item-inner">
                            <div class="item-text">
                              <h2 class="coupon-amount">
                                <c:choose>
                                  <c:when test="${coupon.template.discountType.percent}">全额</c:when>
                                  <c:otherwise> <span>￥</span>${coupon.amount / 100}</c:otherwise>
                                </c:choose>
                              </h2>
                              <div class="coupon-info">
                                <p class="coupon-title">${coupon.templateName}</p>
                                <p>已转赠</p>
                              </div>
                            </div>
                          </div>
                        </label>
                      </li>
                    </ul>
                  </div>
                </c:otherwise>
              </c:choose>
            </c:forEach>
          </div>
        </div>
      </div>
    </c:if>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/trading/order-complete.js" />
    <script type="text/javascript">
      var jsConfig = JSON.parse('${wechatJsConfig}')
      require(['page/trading/order-complete'], function(page) {
        page.init({jsConfig: jsConfig})
      })
    </script>
  </body>
</html>